:root {
  // 自定义变量
  --yu-div-bg1: #ffffff;
  --yu-div-bg2: #F4F4F5;
  --yu-bg-color: #F0F0F1;
  --yu-text-color:#17171A;
  --yu-text-re-color:#f0f0f1df;
  --yu-text-re-hover-color:#F0F0F1;
  --yu-div-hover-gray: #F6F6F6;
  --yu-menu-item-active: var(--el-color-primary);
}

.dark {
  --yu-div-bg1: #09090B;
  --yu-div-bg2: #27272A;
  --yu-bg-color: #17171A;
  --yu-text-color:#F0F0F1;
  --yu-text-re-color:#f0f0f1df;
  --yu-text-re-hover-color:#F0F0F1;
  --yu-menu-item-active: var(--el-color-primary-dark-2);
  --yu-div-hover-gray: #242424;
}

.gray-mode {
  filter: grayscale(70%);
  -webkit-filter: grayscale(70%); /* Safari 兼容 */
}

.colorblind-monochrome {
  filter: invert(80%);
  -webkit-filter: invert(80%);/* Safari 兼容 */
}

/* 下拉菜单专属 scss 修改 */
.el-sub-menu:has(.is-active) {
  .el-sub-menu__title {
    // background: var(--el-color-primary) !important;
    color: var(--el-color-primary) !important;
  }
}

.el-menu--vertical {
  ul{
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
}

.el-menu--horizontal  {
  ul{
    padding: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }
}

.custom-rtl-drawer {
  .el-drawer__header {
    padding: 15px;
    border-bottom: 1px solid var(--el-border-color);
    margin-bottom: 0;
  }
  .el-drawer__body {
    padding: 0;
  }
}
